<template>
  <view class="pay-box">
    <view class="pay-list">
      <view class="row" v-for="(payWay, index) in showList" :key="index" @click="changePayType(payWay.payUrl)">
        <view class="left">
          <image :src="payWay.payIcon"></image>
        </view>
        <view class="center"> {{ payWay.payName }} </view>
        <view class="right">
          <radio :checked="payWay.payUrl == payUrl" color="#f5340d" />
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { getPayWays } from '@/utils/api';

export default {
  components: {},
  props: {
    isBenefit: {
      type: Number,
      default: 0,
    },
    payUrl: {
      type: String,
      default: ""
    },
    wk: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      payWayList: [],
    };
  },
  computed: {
    showList() {

      console.log('this.isBenefit', this.isBenefit)

      if (this.wk) {
        return this.payWayList.filter(item => {
          return [3, 6].includes(item.id)
        })
      }

      if (this.isBenefit == 0) {
        return this.payWayList.filter((item) => {
          return [2, 5].includes(item.id);
        });
      } else {
        return this.payWayList.filter((item) => {
          return [1, 4].includes(item.id);
        });
      }
    },
  },
  created() {
    this.getData();
  },

  methods: {
    async getData() {
      let res = await getPayWays();
      if (res.code == 200) {
        this.payWayList = res.rows;
      }
    },
    changePayType(payUrl) {
      this.$emit('changeCode', payUrl);
    },
  },
};
</script>
<style lang="scss" scoped>
.pay-box {
  width: 100%;
  min-height: 100rpx;
  background: #ffffff;
  margin-top: 30rpx;
  box-sizing: border-box;
  padding: 30rpx 26rpx;

  .pay-list {
    width: 100%;

    .row {
      width: 100%;
      height: 80rpx;
      display: flex;
      align-items: center;

      .txt {
        width: 100%;
        text-align: right;

        font-size: 24rpx;
        font-family: '阿里巴巴普惠体 2.0 55 Regular', 'Microsoft YaHei', 微软雅黑, 'MicrosoftJhengHei', 华文细黑,
          STHeiti, MingLiu;
        font-weight: 500;
        color: #f5340d;
        line-height: 43rpx;
      }

      .left {
        min-width: 53rpx;
        flex-shrink: 0;
        display: flex;
        align-items: center;

        font-size: 30rpx;
        font-family: '阿里巴巴普惠体 2.0 55 Regular', 'Microsoft YaHei', 微软雅黑, 'MicrosoftJhengHei', 华文细黑,
          STHeiti, MingLiu;
        font-weight: 500;
        color: #333333;
        line-height: 34rpx;

        image {
          width: 41rpx;
          height: 41rpx;
        }

        .count {
          font-size: 30rpx;
          font-family: '阿里巴巴普惠体 2.0 55 Regular', 'Microsoft YaHei', 微软雅黑, 'MicrosoftJhengHei', 华文细黑,
            STHeiti, MingLiu;
          font-weight: 500;
          color: #333333;
          line-height: 34rpx;
        }
      }

      .center {
        flex: 1;
        color: #212121;

        font-size: 28rpx;
        font-family: '阿里巴巴普惠体 2.0 55 Regular', 'Microsoft YaHei', 微软雅黑, 'MicrosoftJhengHei', 华文细黑,
          STHeiti, MingLiu;
        font-weight: 500;
        color: #333333;
        line-height: 80rpx;

        .title1 {
          font-size: 28rpx;
          font-family: '阿里巴巴普惠体 2.0 55 Regular', 'Microsoft YaHei', 微软雅黑, 'MicrosoftJhengHei', 华文细黑,
            STHeiti, MingLiu;
          font-weight: 500;
          color: #333333;
          line-height: 80rpx;
        }

        .num {
          font-size: 28rpx;
          font-family: '阿里巴巴普惠体 2.0 55 Regular', 'Microsoft YaHei', 微软雅黑, 'MicrosoftJhengHei', 华文细黑,
            STHeiti, MingLiu;
          font-weight: 500;
          color: #999999;
          line-height: 80rpx;
          margin-left: 15rpx;
        }
      }

      .right {
        width: 60upx;
        flex-shrink: 0;
        display: flex;
        justify-content: flex-end;

        .small {
          font-size: 24rpx;
          font-family: '阿里巴巴普惠体 2.0 55 Regular', 'Microsoft YaHei', 微软雅黑, 'MicrosoftJhengHei', 华文细黑,
            STHeiti, MingLiu;
          font-weight: bold;
          color: #333333;
          line-height: 80rpx;
        }

        .price {
          font-size: 32rpx;
          font-family: '阿里巴巴普惠体 2.0 55 Regular', 'Microsoft YaHei', 微软雅黑, 'MicrosoftJhengHei', 华文细黑,
            STHeiti, MingLiu;
          font-weight: bold;
          color: #333333;
          line-height: 80rpx;
        }

        .cash {
          font-size: 28rpx;
          font-family: '阿里巴巴普惠体 2.0 55 Regular', 'Microsoft YaHei', 微软雅黑, 'MicrosoftJhengHei', 华文细黑,
            STHeiti, MingLiu;
          font-weight: bold;
          color: #f5340d;
          line-height: 80rpx;
        }

        .money {
          font-size: 28rpx;
          font-family: '阿里巴巴普惠体 2.0 55 Regular', 'Microsoft YaHei', 微软雅黑, 'MicrosoftJhengHei', 华文细黑,
            STHeiti, MingLiu;
          font-weight: bold;
          color: #f5340d;
          line-height: 80rpx;
        }
      }
    }
  }
}
</style>
